<template>
	<view class="">
		<!--
			基于uniapp开源插件：https://ext.dcloud.net.cn/plugin?id=8697
			
			使用方法：
			import signature from "@/components/signature";
			
			<signature ref="signature"/>
			
			components:{signature}
			
			this.$refs.signature.show({
				success:(res)=>{
					console.log(res.tempFilePath)//base64格式的图片
				}
			})
		 
		 -->
		<u-mask :show="signModShow">
			<view class="warp">
				<view class="signBox" @tap.stop>
					<view class="wrapper">
						<view class="handBtn">
							<button @click="retDraw" class="delBtn">重写</button>
							<button @click="subCanvas" class="subBtn">完成</button>
						</view>
						<view class="handCenter">
							<canvas v-show="signModShow" :disable-scroll="true" @touchstart="uploadScaleStart"
								@touchmove="uploadScaleMove" :style="{width:'100%',height:'calc(85vh - 8rpx)'}"
								:canvas-id="canvasId"></canvas>
						</view>
			
						<view class="handCenters">
							<canvas :canvas-id="canvasIds" :style="{width:100+'vh',height:85 +'vw'}"></canvas>
						</view>
			
						<view class="handRight">
							<view class="handTitle">请签名</view>
						</view>
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import umask from "@/components/u-mask/u-mask.vue"
	export default {
		data() {
			return {
				signModShow: false,
				ctx: '',
				ctxs: '',
				startX: null,
				startY: null,
				canvasWidth: 0,
				canvasHeight: 0,
				selectColor: 'black',
				lineColor: '#000000', // 颜色
				lineSize: 5, // 笔记倍数
				canvasId:`canvasId${new Date().getTime()}`,
				canvasIds:`canvasIds${new Date().getTime()}`,
				drawFlag:false
			};
		},
		components:{umask},
		mounted() {
			if (!this.ctx) {
				this.ctx = uni.createCanvasContext(this.canvasId, this);
			}
			if (!this.ctxs) {
				this.ctxs = uni.createCanvasContext(this.canvasIds, this);
			}
			setTimeout(() => {
				uni.createSelectorQuery().in(this).select('.handCenter').boundingClientRect(rect => {
						this.canvasWidth = rect.width;
						this.canvasHeight = rect.height;
					})
					.exec();
			}, 300);
		},
		methods: {
			show(params){
				this.retDraw()
				this.signModShow = true
				if(params && params.success){
					this.success = params.success
				}
			},
			// 笔迹开始
			uploadScaleStart(e) {
				this.startX = e.changedTouches[0].x
				this.startY = e.changedTouches[0].y
				//设置画笔参数
				//画笔颜色
				this.ctx.setStrokeStyle(this.lineColor)
				//设置线条粗细
				this.ctx.setLineWidth(this.lineSize)
				//设置线条的结束端点样式
				this.ctx.setLineCap("round") //'butt'、'round'、'square'
				//开始画笔
				this.ctx.beginPath()
			},
			// 笔迹移动
			uploadScaleMove(e) {
				this.drawFlag = true
				//取点
				let temX = e.changedTouches[0].x
				let temY = e.changedTouches[0].y
				//画线条
				this.ctx.moveTo(this.startX, this.startY)
				this.ctx.lineTo(temX, temY)
				this.ctx.stroke()
				this.startX = temX
				this.startY = temY
				this.ctx.draw(true)
			},
			/**
			 * 重写
			 */
			retDraw() {
				this.drawFlag = false
				this.ctx.clearRect(0, 0, 700, 730);
				this.ctx.setFillStyle('#ffffff');
				this.ctx.fill(); //设置填充
				this.ctx.draw();
			},

			//完成
			subCanvas() {
				let that = this
				if(!that.drawFlag){
					return
				}
				uni.canvasToTempFilePath({
					canvasId: that.canvasId,
					fileType: 'png',
					quality: 1, //图片质量
					success(res) {
						that.ctxs.translate(0, that.canvasWidth);
						that.ctxs.rotate(-90 * Math.PI / 180)
						that.ctxs.drawImage(res.tempFilePath, 0, 0, that.canvasWidth, that
							.canvasHeight)
						that.ctxs.draw()
						setTimeout(() => {
							uni.canvasToTempFilePath({
								canvasId: that.canvasIds,
								success: function(res1) {
									// #ifdef H5
									if(that.success){
										that.success(res1)
										that.signModShow = false
										that.retDraw()
									}
									// #endif
									// 非h5
									// #ifndef H5
									if(that.success){
										uni.getFileSystemManager().readFile({
											filePath: res1.tempFilePath,
											encoding: 'base64',
											success: res2 => {
												let base64 = res2.data
												base64 = `data:image/png;base64,${base64}`
												that.success({
													tempFilePath:base64
												})
												that.signModShow = false
												that.retDraw()
											}
										})
									}
									// #endif
								},
								fail: (err) => {}
							}, that)
						}, 200);
					}
				}, this);
			},
		}
	};
</script>

<style scoped lang="scss">
	page {
		height: auto;
		overflow: hidden;
	}
	.warp {
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;

		.signBox {
			width: 85vw;
			height: 85vh;
			background: #ffffff;
			border-radius: 8px;
		}
	}

	.wrapper {
		width: 85vw;
		height: 85vh;
		overflow: hidden;
		display: flex;
		align-content: center;
		flex-direction: row;
		justify-content: center;
		font-size: 28rpx;
	}

	.handRight {
		display: inline-flex;
		align-items: center;
	}

	.handCenter {
		border: 4rpx dashed #e9e9e9;
		flex: 5;
		overflow: hidden;
		box-sizing: border-box;
	}

	.handCenters {
		position: fixed;
		top: 0;
		left: 10000rpx;
		flex: 5;
		overflow: hidden;
		box-sizing: border-box;
	}


	.handTitle {
		transform: rotate(90deg);
		flex: 1;
		color: #666;
	}

	.handBtn button {
		font-size: 28rpx;
	}

	.handBtn {
		height: 85vh;
		display: inline-flex;
		flex-direction: column;
		justify-content: space-between;
		align-content: space-between;
		flex: 1;
	}

	.delBtn {
		position: absolute;
		top: 158rpx;
		left: 46rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.subBtn {
		position: absolute;
		bottom: 158rpx;
		left: 46rpx;
		display: inline-flex;
		transform: rotate(90deg);
		background: #008ef6;
		color: #fff;
		text-align: center;
		justify-content: center;
	}

</style>
